<script setup>
import fieldModel from "@/models/fieldModel.js"
import { defineProps, ref, computed } from "vue";

const { meta, vm } = defineProps(["meta", "vm"]);
const enumEntry = meta["enum-values"] || [];
const dataModel = vm.getModelRef(meta.model);
const field = fieldModel(vm, dataModel, meta);
const enumDict = ref({

});
enumEntry.forEach(x => {
  enumDict.value[x.value] = x.title;
});

const value = computed({
  get() {
    let val = field.value.getValue();
    if (val != null && (val == true || val == 'true' || val == '1')) {
      return true;
    } else {
      return false;
    }
  },
  set(newValue) {
    field.value.setValue(newValue);
  }
});

const displayValue = computed(() => {
  let v = field.value.getValue();
  if (v == null || v == "") {
    return "~";
  } else {
    return enumDict.value[v] || "[" + v + "]";
  }
});
</script>

<template>
  <el-checkbox v-if="field.isEditing" v-model="value" :label="field.title" />
  <span v-else>
    <el-text class="m-2">
      <el-text tag="b">{{ meta.title }}</el-text>
      {{ displayValue }}
    </el-text>
  </span>
</template>